<!-- index2.html is rendered when users enter budget, but has not entered search terms
     therefore, there is no result to display in resContainer -->
<html>
  <head>
    <title>Monopoly</title>
    <!-- import css stylesheet from ../stylesheets/ -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style_new.css">
  </head>
  <body>
  <!-- Header: contains logo image and name -->
    <div id="header">
      <h1>
        <img src="/images/Monopoly.png" style="float:left" height="65"/>Monopoly
        <!-- in case we want to add a motto, etc. -->
        <span>(write anything here?)</span>
      </h1>
    </div>
    <!-- Container contains left and right section for search field and budget field -->
    <div id="container">
      <section id="left">
        <form action="/onSearch" method="get" class="defaultForm">
          Enter A Single Product:<br/>
          <input class="input" id="searchInput"  type="text" name="search" value={{search}}>
          <input type="radio" name="search_type" value="newSrch"/> New Search
          <input type="radio" name="search_type" value="addItm" CHECKED/> Add Item
          <input class="subButton" type="submit" value="Search">
        </form>
      </section>
      <section id="right">
        <div name="budget" id="rSet">
          <form action="/onReset" method="post" class="defaultForm">
            Budget:
            <div id="budgetDisplay">!budget!</div>
            <input type="submit" value="Reset" class="subButton" id="resetButton">
          </form>
        </div>
        <div name="totalPrice" id="rSet">
          <form action="#" method="post" class="defaultForm">
            Total Price:
            <div id="totalDisplay">{{totalPrice}}</div>
            
          </form>
        </div>
      </section>
    </div>
    <!-- resContainer contains result displays -->
    <div id="resContainer">
      <div id="result" name="Results">
      </div>
    </div>
    <!-- footer contains disclaimer about the InvisibleHand's API -->
    <div id="footer">
      Disclaimer: We are using the InvisibleHand's API. Please read the <a href="https://developer.getinvisiblehand.com/termsofservice">InvisibleHand API's Terms of Service</a>.
    </div>
  </body>
</html>